<style lang="less">
    @import "sis.less";
    .ivu-table td.demo-table-info-column{
        background: rgba(75, 89, 108, 0.83);
        color: #ffffff;
    }
    .ivu-table td.demo-table-info-column1{
        background: rgba(75, 89, 108, 0.83);
        /*color: #47ff11;*/
        color: white;

    }
</style>
<template>
    <div id="containerMap1">
        <div id="container" ></div>
        <Spin size="large" fix v-if="spinShow" style="z-index: 999;"></Spin>
    </div>
</template>


<script>
    import {
        todoList
    } from "@/api/activiti";
    import MapLoader from '@/plugins/amap.js';
    import {
        getCgqimg,
        getCloseimg,
        getJkimg,
        getPathArray,
        getSharpimg,
        getXhrimg
    } from '@/plugins/mapPoint.js';
    export default {

        name: "work-path",
        data() {
            return {
                peopleAll:"0",
                nowPeopleAll:"0",
                sjAll:"0",
                yAll:"0",
                map:null,
                spinShow:true,
                time:"",
                xcAll:"",
                xhAll:"",
                xcCharts:[],
                peopleData:[],
                equipmentsData:[],
                //代办件数
                number:"3",
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 3// 页面大小
                },
                //获取饼状图
                sjEcharts:[],
                dbdata:[],
                xxdbdata:[],
                showBorder: false,
                showStripe: false,
                showHeader: false,
                showHeader1: true,
                modal1: false,
                dbtotal:0,
                //
                switch1:true,
                //巡查报告
                columns1: [
                    {
                        title: '序号',
                        key: 'name',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '行政区划',
                        key: 'age',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '完成率',
                        key: 'address',
                        className: 'demo-table-info-column'
                    }
                ],
                data1:[
                    {
                        name:'1',
                        age:'石园街道',
                        address:'80%'
                    }
                ],

                dbColumns: [
                    {
                        title: "流程发起人",
                        key: "applyer",
                        className: 'demo-table-info-column',
                        width: 84
                    },
                    /*{
                      title: "优先级",
                      key: "priority",
                      width: 100,
                      sortable: true,
                      render: (h, params) => {
                        let text = "无",
                          color = "";
                        if (params.row.priority == 0) {
                          color = "green";
                        } else if (params.row.priority == 1) {
                          color = "orange";
                        } else if (params.row.priority == 2) {
                          color = "red";
                        } else {
                          color = "default";
                        }
                        this.dictPriority.forEach(e => {
                          if (e.value == params.row.priority) {
                            text = e.title;
                          }
                        });
                        return h("div", [
                          h(
                            "Tag",
                            {
                              props: {
                                color: color
                              }
                            },
                            text
                          )
                        ]);
                      }
                    },*/
                    {
                        title: "状态",
                        key: "isSuspended",
                        align: "center",
                        className: 'demo-table-info-column',
                        width: 100,
                        render: (h, params) => {
                            /*if (!params.row.isSuspended) {
                              return h("div", [
                                h("Badge", {
                                  props: {
                                    status: "success",
                                    text: "已激活"
                                  }
                                })
                              ]);
                            } else if (params.row.isSuspended) {
                              return h("div", [
                                h("Badge", {
                                  props: {
                                    status: "error",
                                    text: "已挂起"
                                  }
                                })
                              ]);
                            }
                          },
                          filters: [
                            {
                              label: "已激活",
                              value: false
                            },
                            {
                              label: "已挂起",
                              value: true
                            }
                          ],
                          filterMultiple: false,
                          filterMethod(value, row) {
                            if (value) {
                              return row.isSuspended == true;
                            } else if (!value) {
                              return row.isSuspended == false;
                            }
                          }*/
                            return h("div", [
                                h("Tag", {
                                        props: {
                                            color: "green",
                                        },
                                    },
                                    "处理中"
                                )
                            ]);
                        },
                    },

                    {
                        title: "事件类型",
                        key: "eventType",
                        align: "center",
                        className: 'demo-table-info-column'
                     //   width: 90,
                    },
                ],
                xxdbcolumns: [
                    // 表头
                    {
                        title: "所属流程",
                        key: "processName",
                       // width: 150
                    },
                    /* {
                       title: "委托代办人",
                       key: "owner",
                       width: 130
                     },*/
                    {
                        title: "流程发起人",
                        key: "applyer",
                     //   width: 130
                    },
                    /*{
                      title: "优先级",
                      key: "priority",
                      width: 100,
                      sortable: true,
                      render: (h, params) => {
                        let text = "无",
                          color = "";
                        if (params.row.priority == 0) {
                          color = "green";
                        } else if (params.row.priority == 1) {
                          color = "orange";
                        } else if (params.row.priority == 2) {
                          color = "red";
                        } else {
                          color = "default";
                        }
                        this.dictPriority.forEach(e => {
                          if (e.value == params.row.priority) {
                            text = e.title;
                          }
                        });
                        return h("div", [
                          h(
                            "Tag",
                            {
                              props: {
                                color: color
                              }
                            },
                            text
                          )
                        ]);
                      }
                    },*/
                    {
                        title: "状态",
                        key: "isSuspended",
                        align: "center",
                       // width: 110,
                        render: (h, params) => {
                            /*if (!params.row.isSuspended) {
                              return h("div", [
                                h("Badge", {
                                  props: {
                                    status: "success",
                                    text: "已激活"
                                  }
                                })
                              ]);
                            } else if (params.row.isSuspended) {
                              return h("div", [
                                h("Badge", {
                                  props: {
                                    status: "error",
                                    text: "已挂起"
                                  }
                                })
                              ]);
                            }
                          },
                          filters: [
                            {
                              label: "已激活",
                              value: false
                            },
                            {
                              label: "已挂起",
                              value: true
                            }
                          ],
                          filterMultiple: false,
                          filterMethod(value, row) {
                            if (value) {
                              return row.isSuspended == true;
                            } else if (!value) {
                              return row.isSuspended == false;
                            }
                          }*/
                            return h("div", [
                                h("Tag", {
                                        props: {
                                            color: "green",
                                        },
                                    },
                                    "处理中"
                                )
                            ]);
                        },
                    },

                    {
                        title: "事件类型",
                        key: "eventType",
                        align: "center",
                      //  width: 90,
                    },
                    {
                        title: "发生地点",
                        key: "locality",
                     //   width: 160,
                    },
                    {
                        title: "事件描述",
                        key: "eventDescribe",
                     //   width: 160,
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                       // width: 150,
                        sortType: "desc",
                        sortable: true
                    },
                ],
            };
        },
        methods: {
            //初始化
            init() {
                    // this.getDictDataType();
                    this.getDataList();
                let that = this;
                //未完成巡查村柱状图
                this.drawLine();
                //发现问题及整改率饼状图
                // this.getPieChart();
                //事件饼状图
                this.getsjEcharts();
                //统计巡查图表
                this.getxcCharts();
                this.getsjAll();
                this.getxcAll();
                // this.getyAll();
                this.getPeopleAll();
                this.getNowTime();
                this.getxhAll();
                MapLoader().then(AMap => {
                    that.map =new AMap.Map("container", {
                        zoom:11,
                        zooms:[11,15],
                        center:[116.70,40.16],
                        pitch: 0,
                        viewMode: '3D',
                        resizeEnable: true,
                        /*layers: [
                            // 卫星
                            new AMap.TileLayer.Satellite(),
                            // 路网
                            new AMap.TileLayer.RoadNet()
                        ],*/
                    });
                    that.getRiverPeople();
                    that.getEquipmentsData();
                    that.addPolygon();
                    that.spinShow = false;
                }, e => {
                    console.log('地图加载失败' ,e)
                })

            },
            path:function(){
                var _this = this;
                _this.$router.push({path:'/activiti/todo-manage'})
            },

            change (status) {
              //  this.$Message.info('开关状态：' + status);
                var div = document.getElementById("echarts");
                if(status){
                    div.style.display="block";
                }else {
                    div.style.display="none";
                }
            },

            // dispaayDiv:function(){
            //     var div = document.getElementById("echarts");
            //     if(flag)
            //         div.style.display="block";
            //     else
            //         div.style.display="none";
            //     flag=!flag;
            // },

            getDataList() {
                this.loading = true;
                todoList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.success) {
                        this.dbdata = res.result.content;
                        this.dbtotal = res.result.totalElements;
                    }
                });
            },

            getNowTime(){
                var date = new Date();
                this.time = date.toLocaleDateString();
            },
            //获取总巡河人数
            getPeopleAll:function(){
                let that = this;
                this.getRequest("/user/getPeopleCount").then(res => {
                    if (res.success) {
                       that.peopleAll = res.result;
                    }
                });
            },
            //获取共接收问题
            getsjAll:function(){
                let that = this;
                this.getRequest("/actTask/getSjCount").then(res => {
                    if (res.success) {
                        that.sjAll = res.result;
                    }
                });
            },
            //获取巡查次数
            getxcAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCount").then(res => {
                    if (res.success) {
                        that.xcAll = res.result;
                    }
                });
            },
            //获取巡查总公里数
            //获取巡查次数
            getxhAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXhCount").then(res => {
                    if (res.success) {
                        that.xhAll = res.result;
                    }
                });
            },
            //获取已处理事件
            // getyAll:function(){
            //     let that = this;
            //     this.getRequest("/actBusiness/getYCount").then(res => {
            //         if (res.success) {
            //             that.yAll = res.result;
            //         }
            //     });
            // },

            //获取设备数据
            getEquipmentsData:function(){
                let that = this;
                this.getRequest("/equipments/getAll").then(res => {
                    if (res.success) {
                        that.equipmentsData = res.result;
                        that.addMarkers();
                    }
                });
            },
            //画地图点(按群组画巡河人)
            addPeopleMarkers:function(){
                let that = this;
                let lnglats = that.peopleData;
                let total = 0;
                var markers = [];
                let xhrImg = getXhrimg();
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    if(null != lnglat.user){
                        total = total+1;
                        let u = lnglat.user;
                        let title = u.username+"---"+u.departmentTitle;
                        let content = [];
                        /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                        content.push("电话：010-64733333");
                        content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                        content.push("河流名称:"+lnglat.riverName +
                            "<br/>"+
                            "巡河开始时间:"+lnglat.patrolStartTime +
                            "<br/>"+
                            "起始坐标:<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;经度:"+lnglat.longitude+
                            "<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;纬度:"+lnglat.dimensionality);
                        // content.push("<br/>");
                        // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                        // 创建点实例
                        let marker = new AMap.Marker({
                            title:title,
                            animation:"AMAP_ANIMATION_DROP",
                            position: new AMap.LngLat(lnglat.longitude, lnglat.dimensionality),
                            icon: xhrImg,
                            extData: {
                                id: lnglat.id
                            }
                        });
                        marker.content = this.createInfoWindow(title,content);
                        marker.on('click', that.markerClick);
                        // marker.emit('click', {target: marker});
                        markers.push(marker);
                    }
                }
                this.map.add(new AMap.OverlayGroup(markers));
                this.nowPeopleAll = total;
            },

            //画地图点(按群组画)
            addMarkers:function(){
                let that = this;
                let lnglats = that.equipmentsData;
                var markers = [];
                let cgqimg = getCgqimg();
                let jkImg = getJkimg();
                let xhrImg = getXhrimg();
                //传感器图标
                var cgqIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: cgqimg,
                    imageSize: new AMap.Size(48, 48),
                });
                //监控图标
                var jkIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: jkImg,
                    imageSize: new AMap.Size(48, 48),
                });
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    let icon;
                    if(lnglat.equipmentType == 1){
                        icon = jkIcon;
                    }else{
                        icon = cgqIcon;
                    }

                    let title = lnglat.equipmentName;
                    let content = [];
                    /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                    content.push("电话：010-64733333");
                    content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                    content.push(lnglat.bak);
                    // content.push("<br/>");
                    // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                    // 创建点实例
                    let marker = new AMap.Marker({
                        title:lnglat.equipmentName,
                        animation:"AMAP_ANIMATION_DROP",
                        position: new AMap.LngLat(lnglat.lon, lnglat.lat),
                        icon: icon,
                        extData: {
                            id: lnglat.id
                        }
                    });
                    marker.content = this.createInfoWindow(title,content);
                    marker.on('click', that.markerClick);
                    // marker.emit('click', {target: marker});
                    markers.push(marker);
                }
                this.map.add(new AMap.OverlayGroup(markers));
                // this.map.clearInfoWindow();
            },

            //标点点击事件
            markerClick:function(e) {
                var infoWindow = new AMap.InfoWindow({isCustom:true,closeWhenClickMap:true,offset: new AMap.Pixel(30, -40)});
                infoWindow.setContent(e.target.content);
                infoWindow.open(this.map, e.target.getPosition());
            },
            //构建自定义信息窗体
            createInfoWindow:function(title, content) {
                let that = this;
                var info = document.createElement("div");
                info.className = "custom-info input-card content-window-card";


                //可以通过下面的方式修改自定义窗体的宽高
                info.style.width = "300px";
                // 定义顶部标题
                var top = document.createElement("div");
                var titleD = document.createElement("div");
                var closeX = document.createElement("img");
                top.className = "info-top";
                titleD.innerHTML = title;
                titleD.onclick = that.map.clearInfoWindow( );
                closeX.src = getCloseimg();
                closeX.onclick = that.mapClearInfoWindow;
                // closeX.setAttribute("click", that.mapClearInfoWindow);

                top.appendChild(titleD);
                top.appendChild(closeX);
                info.appendChild(top);

                // 定义中部内容
                var middle = document.createElement("div");
                middle.className = "info-middle";
                middle.style.backgroundColor = 'white';
                middle.innerHTML = content;
                info.appendChild(middle);

                // 定义底部内容
                var bottom = document.createElement("div");
                bottom.className = "info-bottom";
                bottom.style.position = 'relative';
                bottom.style.top = '0px';
                bottom.style.margin = '0 auto';
                var sharp = document.createElement("img");
                sharp.src = getSharpimg();
                bottom.appendChild(sharp);
                info.appendChild(bottom);
                return info;
            },

            //关闭地图弹窗
            mapClearInfoWindow:function(){
                this.map.clearInfoWindow();
            },

            //画地图遮罩
            addPolygon:function(){
                let that = this;
                /* new AMap.DistrictSearch({
                   extensions:'all',
                   subdistrict:0
                 }).search('顺义区',function(status,result) {*/
                // 外多边形坐标数组和内多边形坐标数组
                // var outer = [
                //   new AMap.LngLat(-180,90,true),
                //   new AMap.LngLat(-180,-90,true),
                //   new AMap.LngLat(180,-90,true),
                //   new AMap.LngLat(180,90,true),
                // ];
                // var holes = result.districtList[0].boundaries
                // var pathArray = [
                //     outer
                // ];
                //顺义区地图遮罩边界
                var holes = getPathArray();
                var polygon = new AMap.Polygon( {
                    path:holes,
                    strokeColor: 'rgb(0,0,0)',
                    strokeWeight: 3,
                    strokeOpacity:1,
                    fillColor: 'rgba(255,255,255)',
                    fillOpacity: 0,
                    strokeStyle:'dashed',
                    strokeDasharray:[10,2]
                });
                // polygon.setPath(holes);
                that.map.add(polygon);
                // })
            },

            //获取巡河人员
            getRiverPeople(){
                this.loading = true;
                let url = "/river/getRiverPeople";

                this.postRequest(url,{time:this.time}).then(res => {
                    this.loading = false;
                    if (res.success) {
                        this.peopleData = res.result;
                        this.addPeopleMarkers();
                    }
                });
            },
            //清除地图所有点
            mapClearMarker:function(){
                let markers = this.map.getAllOverlays('marker')
                this.map.remove(markers);
            },

            //未完成巡查村
            drawLine(){



            },
            //获取饼状图事件图表
            getsjEcharts:function(){
                let that = this;
                this.getRequest("/actTask/getSjCharts").then(res => {
                    if (res.success) {
                        that.sjEcharts = res.result;
                        this.getPieChart();
                    }
                });
            },
            //获取巡查集合
            getxcCharts:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCharts").then(res => {
                    if (res.success) {
                        that.xcCharts = res.result;
                        this.getxcEcharts();
                    }
                });
            },
            //发现问题及整改率饼状图
            getPieChart:function(){
                let sjEcharts = this.sjEcharts;
                let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                //绘制图表
                myChart2.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle:{//图例文字的样式
                            fontSize:'9',
                            color:'#FFFFFF'
                        },
                        itemWidth:12,
                        itemHeight:7,
                        padding:[8,8,8,8],
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '73%',//设置饼图大小
                            center: ['55%', '60%'],
                            labelLine:{ //指示线的长度
                                normal:{
                                    length:5
                                }
                            },
                            data: sjEcharts,
                            label: {
                                textStyle: {
                                    fontSize:9
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            //巡查统计图表
            getxcEcharts:function(){
                let xcCharts = this.xcCharts;
                let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                myChart3.setOption({
                    grid:{
                        top:'20%',//距上边距
                        bottom:'20%'
                    },
                    tooltip: {},
                    dataset: {
                        source: xcCharts
                    },
                    xAxis: {type: 'category',
                        axisLabel: {
                            interval:0,

                            textStyle:{
                                fontSize:8,
                                color:'#FFFFFF'
                            }
                        },
                    },
                    yAxis: {axisLabel: {

                            textStyle:{
                                fontSize:8,
                                color:'#FFFFFF'
                            }
                        },},
                    series: [
                        {
                            type: 'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{ color:'#31E917' }
                            }
                        },
                    ]
                })
            }
        },
        mounted(){
            this.init();

        },

        created() {
        },
    };
</script>

